@import '../global/global';

$over-placeholder-z-index: 1;
$over-input-z-index: 2;

.ring-query-assist {
  position: relative;
  box-sizing: border-box;
  height: $ring-unit*3;
  line-height: normal;
  background: #FFF;
  @include ring-font;
}

.ring-query-assist__input {
  padding-top: 2px;

  overflow: hidden;
  white-space: nowrap;

  position: relative;
  top: 1px;
  left: 1px;
  z-index: $over-placeholder-z-index;

  &.ring-query-assist__input {
    line-height: 16px;

    // Supports IE
    _:-ms-input-placeholder, :root & {
      line-height: 17px;
    }

    // Supports Edge
    @supports (-ms-ime-align:auto) {
      & {
        line-height: 17px;
      }
    }

    box-shadow: 0 0 0 1px $ring-gray-color;
    background: transparent;
    border-color: transparent;
    height: $ring-unit*3 - 2;
    width: calc(100% - 2px);
    border-width: 0;

    &:active, &:focus {
      box-shadow: 0 0 0 1px $ring-blue-color;
      border-color: transparent;
    }
  }

  &.ring-query-assist__input_gap {
    border-right-width: $ring-unit*3;
  }

  &.ring-query-assist__input_double-gap {
    border-right-width: $ring-unit*6;

    & ~ .ring-query-assist__icon_clear {
      right: $ring-unit*3 + 2;
    }
  }
}

.ring-query-assist__placeholder {
  display: block;
  position: relative;
  top: -19px;

  // Supports IE
  _:-ms-input-placeholder, :root & {
    top: -18px;
  }

  // Supports Edge
  @supports (-ms-ime-align:auto) {
    & {
      top: -18px;
    }
  }

  left: 5px;
  width: calc(100% - #{$ring-unit*3});

  @include ring-ellipsis;

  color: #9C9C9C;
  font-size: $ring-font-size;
}

.ring-query-assist__letter_text {
  color: #B58900;
}

.ring-query-assist__letter_default,
.ring-query-assist__letter_field-name {
  color: #1A1A1A;
}

.ring-query-assist__letter_field-value {
  color: #176B8A;
}

.ring-query-assist__letter_operator {
  color: $ring-dark-gray-color;
}

.ring-query-assist__letter_error {
  padding-bottom: 2px;
  background: url('query-assist__error.gif') bottom repeat-x;
}

.ring-query-assist__icon {
  position: absolute;
  top: 3px;
  right: 1px;
  height: $ring-unit*2;
  width: $ring-unit*2;

  padding: 0 4px;

  cursor: pointer;
  user-select: none;
  z-index: $over-input-z-index;

  &:hover {
    color: $ring-link-hover-color;
  }

  svg {
    vertical-align: baseline;
  }
}
